<template>
    <div class='icon'>
         <swiper :options="swiperIconOption">
             <swiper-slide  v-for="page,i in pages":key='i'>
                 <ul>          
                    <li v-for="item in page" :key='item.id'>
                       <img :src="item.imgUrl" alt="">
                       <a href="javascript:;">
                          <p>{{item.desc}}</p>
                        </a>
                    </li> 
                </ul>
          </swiper-slide>
        </swiper>
    </div>
</template>


<script>
export default{
    data () {
        return {
            iconList:[
                {
                    id:1001,
                    url:'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                    dsc:"热门景点"
                },
                 {
                    id:1002,
                    url:'https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                    dsc:"北京笔友"
                },
                 {
                    id:1003,
                    url:'https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
                    dsc:"一日游"
                },
                 {
                    id:1004,
                    url:' https://imgs.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
                    dsc:"野生动物"
                },
                    {
                    id:1005,
                    url:'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                    dsc:"热门景点"
                },
                 {
                    id:1006,
                    url:'https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                    dsc:"北京笔友"
                },
                 {
                    id:1007,
                    url:'https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
                    dsc:"一日游"
                },
                 {
                    id:1008,
                    url:' https://imgs.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
                    dsc:"野生动物"
                },
                   {
                    id:1009,
                    url:'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                    dsc:"热门景点"
                }
               
            ],
            num:8,
            pagelist:[],
            swiperIconOption: {
                   
              },
        }
    },
    methods: {
    },
    computed: {
        pages(){
            const pageArr=[]
            this.icon.forEach((item,i) => {
                const page = Math.floor(i/8)
                if(!pageArr[page]){
                    pageArr[page]=[]
                }
                    pageArr[page].push(item)         
            });
            return pageArr
        }
    },
    props:['icon']
}    
</script>
 


<style lang="scss" scoped>
@import '../../css/sass/common.scss';
.icon{
  width: 100%;
  ul{
      width: 100%;
      height: pt(190);
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      li{
          padding-top: 0.1rem;
          width: 25%;
          box-sizing: border-box;
          text-align: center;
          height:pt(80);
          
          img{
              width: pt(50);
              height:pt(50);
          }
          a{
              p{   
                  margin-top: 0.1rem;
                  text-align: center;
                  font-size: 14px;
                  color: black;
              }
          }
      }
  }
  .one>li:nth-last-of-type(-n+4){
            padding-top:0;
            margin-top: -0.6rem;
      }
}
</style>

